<template>
  <el-row :gutter="20">
    <el-col :span="6" :offset="0" v-for="(item, index) in panels" :key="index">
      <el-card shadow="hover" :body-style="{ padding: '20px' }">
        <template #header>
          <div>
            {{ item.title }}
            <el-tag class="mx-1" type="su" effect="plain">
              {{ item.unit }}
            </el-tag>
          </div>
        </template>
        <!-- card body -->
        <span>
          <NumberScrolling :number="item.value" />
        </span>
        <el-divider />
        <div>
          <span>{{ item.subTitle }}</span>
          <span>{{ item.subValue }}</span>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { getStatistics1, getStatistics2, getStatistics3 } from '@/api/user';
import { ref } from 'vue';

interface IPanels {
  title: string;
  value: number;
  unit: string;
  subTitle: string;
  subValue: number;
}
const panels = ref<IPanels[]>([]);
async function getData() {
  let res1 = await getStatistics1();
  panels.value = res1.data.panels;
  // await getStatistics2()
  let res3 = await getStatistics3();
  // panels.value = res3.data.panels
}
getData();
</script>

<style lang="scss" scoped></style>
